<template>
  <div class="seckill">
    <p class="Ckill">京东秒杀</p>
    <p class="time">{{ time1 }}点起</p>
    <div class="clock">
      <van-count-down :time="time">
        <template #default="timeData">
          <span class="block">{{ timeData.hours }}</span>
          <span class="colon">:</span>
          <span class="block">{{ timeData.minutes }}</span>
          <span class="colon">:</span>
          <span class="block">{{ timeData.seconds }}</span>
        </template>
      </van-count-down>
    </div>
    <p class="lastP">爆款轮番秒<span>></span></p>
  </div>
  
</template>

<script>
import Vue from "vue";
import { CountDown } from "vant";
Vue.use(CountDown);
export default {
  data() {
    return {
      time: 180000,
      time1:22
    };
  },
  methods: {},
};
</script>

<style scoped lang='scss'>
.seckill {
  display: flex;
  align-items: center;
  //   background: skyblue;
  .Ckill {
    margin-left: 40px;
  }
  .time {
    color: red;
    margin-left: 40px;
    font-size: 14px;
  }
  .clock {
    color: red;
    font-size: 14px;
    margin-left: 40px;
    .block  {
      display: inline-block;
      width: 100px;
      height: 100px;
      line-height: 100px;
      text-align: center;
      background: red;
      color: white;
      border-radius: 30px;
    }
  }
  .lastP {
    position: absolute;
    right: 40px;
    color: red;
    font-size: 14px;
    span {
      display: inline-block;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      line-height: 60px;
      text-align: center;
      background: red;
      color: white;
    }
  }
}
</style>